import { CoverImage, Image, Swiper, SwiperItem, View, } from "@tarojs/components"

import * as Rest from '../../service'

import back from '../../../theme/main/back_center.png'
import one from '../../../theme/main/one.png'
import two from '../../../theme/main/two.png'
import three from '../../../theme/main/three.png'
import four from '../../../theme/main/four.png'
import { TBar, TPage } from "../../../shared/ui"
import { IconFont } from "../../../theme"
import ScrollingList from "../../../components/broadcast"
import { useEffect, useState } from "react"
import { Product } from '../../block/index';
import { useDidHide, useDidShow } from "@tarojs/taro"



const Main = () => {





  const [data, setData] = useState({ broadcast: [], banner: [], three: [] });
  const [productList, setProductList] = useState<{ productName: string, id: number, rate: number, period: number, min: number }[]>([])
  const [highlightId, setHighlightId] = useState(1)

  const [show, setShow] = useState(true)
  useDidShow(() => {
    setShow(() => { return true })
  })
  useDidHide(() => {
    console.log('hide')
    setShow(() => { return false })
  })

  const initHomeInfo = async () => {
    const res = await Rest.getHomeInfo()
    if (res.code == 0) {
      try {
        const { data } = res
        console.log(data, 123)
        setData(data);
      } catch (error) {
      }
    }
  }

  const getProdList = async () => {
    const res = await Rest.getProduct()
    if (res.code == 0) {
      try {
        const { data } = res
        console.log("--------")
        console.log(data);
        setProductList(data);
      } catch (error) {
      }
    }
  }

  useEffect(() => {
    initHomeInfo();
    getProdList();
  }, [])





  return show && <TPage>
    <View className="p-[20px] ">
      <TBar title={'首页'}>
        <View className="flex items-center absolute right-[40px] top-[24px]">
          <View>
            <IconFont name='news' color='#ffffff' size={40} />
          </View>
          <View className="ml-[24px]">
            <IconFont name='question' color='#ffffff' size={40} />
          </View>
        </View>
      </TBar>


      <Swiper
        className='mb-[20px] h-[320px]'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        circular
        indicatorDots
        autoplay>
        {
          data.banner.map((item, index) => {
            return (
              <SwiperItem itemId={`swiper ${index}`} key={index}>
                <Image className="w-[710px] h-[320px]" src={item} />
              </SwiperItem>
            );
          })
        }
      </Swiper>

      <ScrollingList items={data.broadcast}></ScrollingList>

      <View className="flex justify-between mt-[40px]  p-[20px]">
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={one} />
          <span className="text-white text-[28px] mt-[8px]">资产</span>
        </View>
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={two} />
          <span className="text-white text-[28px] mt-[8px]">充值</span>
        </View>
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={three} />
          <span className="text-white text-[28px] mt-[8px]">兑换</span>
        </View>
        <View className="flex flex-col text-center">
          <Image className="w-[104px] h-[104px]" src={four} />
          <span className="text-white text-[28px] mt-[8px]">客服</span>
        </View>
      </View>

      <View className="flex justify-between mt-[20px6]">
        {
          data.three.map((item: any, index) => {
            const gradients = [
              "bg-gradient-to-b from-[#FFAD20] to-[#FF750E]",
              "bg-gradient-to-b from-[#7945F0] to-[#5038E2]",
              "bg-gradient-to-b from-[#A5F0E5] to-[#16D2B6]"
            ];
            return (
              <View className="w-[220px] h-[110px] text-white text-[28px] p-[12px] bg-cover bg-center" key={index} style={{ backgroundImage: `url(${back})` }}>
                <View className="flex justify-between">
                  <View className={`inline-block px-[9px] text-[30px] text-left font-normal ${gradients[index]} rounded`}>
                    {item.S}
                  </View>
                  <span className="text-[#F21646]">{`${(item.c * 100).toFixed(2)}%`}</span>
                </View>
                <View className="mt-[8px] text-[28px]">${item.u} </View>
              </View>
            );
          })
        }
      </View>
      <View className="inline-block font-semibold text-[36px] text-[#fff] mt-[40px] mb-[30px]">
        推荐项目
        <View className="mx-[6px] border-t-[4px] border-solid border-[#007BFF]"></View>
      </View>
      {
        productList.map((item) => {
          return (
            <Product item={item} key={item.id} highlightId={highlightId} onClickMet={(id) => { setHighlightId(id) }} />
          )
        })
      }
    </View>

  </TPage>



}

export default Main
